/* eslint-disable */
import React, { useState, useEffect, useContext } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Icon, Button, Table, Tabs, Modal } from 'antd';
import LoadingComponent from '@/components/PageLoading/index';
import dynamic from 'umi/dynamic';
const { TabPane } = Tabs;

const namespace = 'formManage';

// 涉及到的标签组件按需加载
const ElementInfo = dynamic({
  loader: () => import('./ElementInfo'),
  loading: LoadingComponent,
});

const ElementDriveRuleInfo = dynamic({
  loader: () => import('./ElementDriveRuleInfo'),
  loading: LoadingComponent,
});

function ElementTab(props) {
  const [menuKey, setMenuKey] = useState('ElementInfo');
  const [contentList, setContentList] = useState({});

  const tabList = [
    {
      key: 'ElementInfo',
      tab: '表单元素',
    },
    {
      key: 'ElementDriveRuleInfo',
      tab: '元素驱动规则',
    },
    // {
    //   key: 'b',
    //   tab: '表单用途',
    // }
  ];

  useEffect(() => {
    onTabChange('ElementInfo');
  }, [props.selectForm]);

  const onTabChange = key => {
    const contentMap = {
      ElementInfo: <ElementInfo />,
      ElementDriveRuleInfo: <ElementDriveRuleInfo />,
    };
    setContentList(contentMap);
    setMenuKey(key);
  };

  return (
    <Card
      style={{ width: '100%' }}
      tabList={tabList}
      className="cute"
      activeTabKey={menuKey}
      onTabChange={key => {
        onTabChange(key);
      }}
    >
      {/* {Object.keys(contentList).map(key => (
        <div key={key} style={{ display: menuKey === key ? 'block' : 'none' }}>
          {contentList[key]}
        </div>
      ))} */}
      {Object.keys(contentList).map(
        key =>
          (key === 'ElementInfo' || key === menuKey) && (
            <div key={key} style={{ display: menuKey === key ? 'block' : 'none' }}>
              {contentList[key]}
            </div>
          )
      )}
    </Card>
  );
}

export default connect(({ formManage }) => ({
  selectForm: formManage.selectForm,
}))(ElementTab);
